import React, {PureComponent} from 'react';
import classNames from 'classnames';

class Row extends PureComponent {
    displayName = 'Row';

    renderCols () {
        return React.Children.map(this.props.children, (child) => {
            const componentName = child && child.type && child.type.displayName ? child.type.displayName : '';
            if (componentName === 'Col') {
                const props = Object.assign({
                    'gutter': this.props.gutter
                }, child.props);
                return React.cloneElement(child, props);
            } else {
                return child;
            }
        });
    }

    render () {
        const className = classNames('cm-row', this.props.className);
        const eleName = this.props.component || 'div';
        const style = this.props.style || {};
        if (this.props.gutter) {
            style.marginLeft = -this.props.gutter / 2;
            style.marginRight = -this.props.gutter / 2;
        }
        return React.createElement(eleName, {
            className,
            style
        }, this.renderCols());
    }
}


export default Row;
